import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';

function FormDialog() {
  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('表单提交数据:', formData);
    // 这里可以添加提交逻辑，比如API调用
    handleClose(); // 关闭对话框
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleOpen}>
        打开表单对话框
      </Button>

      <Dialog open={open} onClose={handleClose}>
        <form onSubmit={handleSubmit}>
          <DialogTitle>添加新用户</DialogTitle>
          <DialogContent>
            <TextField
              autoFocus
              margin="dense"
              name="name"
              label="用户名"
              type="text"
              fullWidth
              variant="standard"
              value={formData.name}
              onChange={handleChange}
              required
            />
            <TextField
              margin="dense"
              name="email"
              label="密码"
              type="email"
              fullWidth
              variant="standard"
              value="zwz123456"
              onChange={handleChange}
              required
            />
   

          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose}>取消</Button>
            <Button type="submit" variant="contained" color="primary">
              保存
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    </div>
  );
}

export default FormDialog;